<!-- 表格单选 -->

<template>
  <FormSlot :bind="`no_${obj.no}`" tip="请选择每一行" noLabel :required="obj.required === 1">
    <div class="QuestionnaireDetail-MyQuestion-table">
      <div class="flex">
        <div class="flex2" />
        <div v-for="option in obj.optionList" :key="option.key" class="flex1">{{ option.content }}</div>
      </div>

      <FormSlot
        v-for="question in obj.questionList"
        :key="question.key"
        :bind="`no_${obj.no}_${question.no}`"
        :required="obj.required === 1"
        noLabel
      >
        <div class="flex">
          <div class="flex2">{{ question.title }}</div>
          <div v-for="option in obj.optionList" :key="option.key" class="flex1">
            <el-radio
              v-model="form[`no_${obj.no}_${question.no}`]"
              :label="option.label"
              :disabled="disabled"
              @change="toChange"
            />
          </div>
        </div>
      </FormSlot>
    </div>
  </FormSlot>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRadio from '../MyRadio'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRadio, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyRadioTable',

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 数据改变
     */
    toChange() {
      const { obj: { no, questionList }, form } = this

      const valueList = questionList.map((sub) => form[`no_${no}_${sub.no}`] || '')
      form[`no_${no}`] = valueList.every((value) => value) ? 'ready' : ''
    },
  },
})
</script>
